<template>
  <div class="box">
    <div>
      <van-nav-bar title="我的京东" @click-left="onClickLeft">
        <template #left>
          <van-icon name="arrow-left" size="26" color="black" />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>

    <header class="header1">
      <a href="#"
        ><img
          src="https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670173200&t=2a7170931e9c487fed203763ad1ddfdf"
          alt=""
      /></a>
      <a href="#"><span>jd_5e76f23e4c4a5</span></a>
      <a href="#">
        <div class="tip">
          <span>京享值</span>
          <span>小白守约702分</span>
        </div>
      </a>
      <a href="#" @click="jumpTo()">
        <van-icon name="setting-o" size=".25rem" color="#000"> </van-icon>
      </a>
    </header>
    <div class="main">
      <ul class="part1">
        <li>
          <van-icon name="todo-list-o" size="26" />
          <span>待付款</span>
        </li>
        <li>
          <van-icon name="send-gift-o" size="26" />
          <span>待发货</span>
        </li>
        <li>
          <van-icon name="logistics" size="26" />
          <span>待收货</span>
        </li>
        <li>
          <van-icon name="chat-o" size="26" />
          <span>待评价</span>
        </li>
      </ul>
      <ul class="part2">
        <li>
          <van-icon name="phone-circle-o" size="26" />
          <span>客户服务</span>
        </li>
        <li>
          <van-icon name="todo-list-o" size="26" />
          <span>我的预约</span>
        </li>
        <li>
          <van-icon name="balance-pay" size="26" />
          <span>闲置换钱</span>
        </li>
        <li>
          <van-icon name="exchange" size="26" />
          <span>高价回收</span>
        </li>
      </ul>
    </div>
    <div class="footer">
      <van-divider>猜你喜欢</van-divider>
    <ul class="recommendList">
      <li
        v-for="(item, index) in recommendList"
        :key="index"
        @click="jumpTo(item.proid)"
      >
        <img :src="item.img1" alt="" width="100%" />
        <div>
          <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
          <p>￥{{ item.originprice }}</p>
        </div>
      </li>
    </ul>
   
    </div>
  </div>
  
</template>

<script>
import { doRecommendlist } from "../api/cart";
import Vue from "vue";

import { Divider } from "vant";
Vue.use(Divider);

export default {
  name: "Mine",
  data() {
    return {
      showPopover: false,
      recommendList: [],
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分类搜索", icon: "apps-o" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "浏览记录", icon: "browsing-history-o" },
      ],
    };
  },
  created () {
    doRecommendlist({ count: this.count, limitNum: 12 }).then((data) => {
      console.log(data.data.data);
      this.recommendList = data.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    jumpTo() {
      this.$router.push("/zhanghu");
    },
  },
};
</script>

<style scoped>
.header1 {
  height: 1.25rem;
  background: rgb(165, 213, 221);
  position: relative;
  /* display: flex;
    padding: 0 0.15rem;
    box-sizing:border-box;
    justify-content: space-between;
    align-items: center; */
}
.header1 a:nth-child(1) {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 0.23rem;
  top: 0.3rem;
}
.header1 a:nth-child(1) img {
  width: 100%;
}
.header1 a:nth-child(2) {
  display: block;
  /* float: right;
    margin-right: 1.64rem; */
  color: rgb(4, 3, 3);
  font-size: 0.22rem;
  line-height: 0.24rem;
  position: absolute;
  top: 0.39rem;
  left: 1.3rem;
}
.header1 a:nth-child(3) {
  display: block;
  position: absolute;
  top: 0.8rem;
  left: 1.3rem;
}
.tip span {
  margin-right: 0.1rem;
  height: 0.24rem;
  box-sizing: border-box;
  border: 0.02rem solid #95bbfd;
  border-radius: 0.1rem;
  background: #eef1e7;
  text-align: center;
  line-height: 0.2rem;
}
.header1 a:nth-child(4) {
  display: block;
  position: absolute;
  bottom: 0.17rem;
  right: 0.25rem;
}
.part1 {
  height: 1rem;
  display: flex;
  background-color: #f4e1e1;
  justify-content: space-around;
  padding-top: 0.2rem;
  background: rgb(242, 247, 247);
  margin-top: 0.1rem;
}
.part1 li {
  display: flex;
  flex-direction: column;
  font-size: 0.18rem;
  align-items: center;
}
.part2 {
  height: 1rem;
  display: flex;
  background-color: #e9e4f9;
  justify-content: space-around;
  padding-top: 0.2rem;
  margin-top: 0.1rem;
}
.part2 li {
  display: flex;
  flex-direction: column;
  font-size: 0.18rem;
  align-items: center;
}
.recommendList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recommendList li {
  width: 49%;
}
.recommendList li div p {
  color: red;
  font-size: 0.2rem;
  font-weight: bold;
  margin-bottom: 0.2rem;
}
</style>